<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">商家列表</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>商家列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-form :model="form" label-width="120px">
      <el-form-item label="商家名">
        <el-input v-model="form.shopName" />
      </el-form-item>
      <el-form-item label="商家电话">
        <el-input v-model="form.shopTelephone" />
      </el-form-item>
      <el-form-item label="所在省" :label-width="formLabelWidth">
        <el-select v-model="form.provinceId" clearable placeholder="Select"
                   @change="provinceChange(form)" >
          <el-option
              v-for="item in provinces"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在市" :label-width="formLabelWidth">
        <el-select v-model="form.cityId" clearable placeholder="Select"
                   @change="cityChange(form)"
                   :disabled="form.provinceId===null || form.provinceId===''">
          <el-option
              v-for="item in cities"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在区" :label-width="formLabelWidth">
        <el-select v-model="form.districtId" clearable placeholder="Select"
                   :disabled="form.cityId===null || form.cityId===''">
          <el-option
              v-for="item in districts"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="只显示未处理">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button  @click="resetClick">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">查询结果</el-divider>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"

        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="120" />
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===2)" type="success">营业中</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===1)" type="success">休息中</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===0)" type="warning">审核中</el-text>
        </template>
        <!-- 之后添加是否审核 -->
      </el-table-column>
      <el-table-column prop="shopName" label="商店名" width="180" />
      <el-table-column prop="sellerName" label="商户姓名" width="180" />
      <el-table-column prop="password" label="商户密码" width="180" />
      <el-table-column prop="shopTelephone" label="商店电话" width="180" />
      <el-table-column prop="sellerTelephone" label="商户电话" width="180" />
      <el-table-column prop="commission" label="平台提成(%)" width="180" />
      <el-table-column prop="provinceName" label="所在省" width="180" />
      <el-table-column prop="cityName" label="所在市" width="180" />
      <el-table-column prop="districtName" label="所在区" width="180" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="large"
              @click.prevent="detail(scope.$index)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
    <el-pagination
                   :background=true
                   v-model:total="totalCount"
                   v-model:page-size="form.pageSize"
                   :small=false
                   :page-sizes="[5, 10, 20, 50]"
                   @size-change="handleSizeChange"
                   layout="sizes, prev, pager, next, jumper"
                   @current-change="changePageNumber" />
    </div>
    <div class="demo-pagination-block" style="margin-top: 20px">
      <el-button type="primary" @click="clickAdd">新增商家...</el-button>
      <el-button type="danger" :disabled="delete_list.length === 0
" @click="clickDelete">删除已选</el-button>
    </div>


    <el-divider content-position="left">批量审核通过</el-divider>

    <el-button type="success" @click="clickPass">批量通过审核</el-button>


    <!--  消息对话框    -->

    <el-dialog v-model="dialogFormVisible" title="添加商家">
      <el-form :model="addForm">
        <el-form-item label="商店名" :label-width="formLabelWidth">
          <el-input v-model="addForm.shopName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="addForm.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商户姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.sellerName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商店电话" :label-width="formLabelWidth">
          <el-input v-model="addForm.shopTelephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商户电话" :label-width="formLabelWidth">
          <el-input v-model="addForm.sellerTelephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="平台提成(%)" :label-width="formLabelWidth">
          <el-input v-model="addForm.commission" autocomplete="off" />
        </el-form-item>
<!--      下面三个之后做成选择的格式  -->
        <el-form-item label="所在省" :label-width="formLabelWidth">
          <el-select v-model="addForm.provinceId" clearable placeholder="Select"
                     @change="provinceChange(addForm)" >
            <el-option
                v-for="item in provinces"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在市" :label-width="formLabelWidth">
          <el-select v-model="addForm.cityId" clearable placeholder="Select"
                     @change="cityChange(addForm)"
                     :disabled="addForm.provinceId===null || addForm.provinceId===''">
            <el-option
                v-for="item in cities"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在区" :label-width="formLabelWidth">
          <el-select v-model="addForm.districtId" clearable placeholder="Select"
                     :disabled="addForm.cityId===null || addForm.cityId===''">
            <el-option
                v-for="item in districts"
                :key="item.areaId"
                :label="item.areaName"
                :value="item.areaId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmClickAdd"
            :disabled= "addForm.provinceId==='' || addForm.cityId==='' || addForm.districtId==='' ||
                         addForm.password==='' || addForm.shopName===null">
          确认添加
        </el-button>
      </span>
      </template>
    </el-dialog>

  </el-card>

</template>

<script setup>
import store from "@/store";
import {onMounted, reactive, ref} from "vue";
import {add, merchantPass, page, remove, searchCity, searchDistrict, searchPage, searchProvince} from "@/api/merchant";
import router from "@/router";
import {dishPass} from "@/api/dish";
import {open_error, open_success} from "@/utils/common";

const tableData = ref([]); // table数据

const delete_list = ref([]); // 需要删除的id列表

const dialogFormVisible = ref(false); // 添加弹出框的显示与否

const formLabelWidth = '100px'

// 查询表单
const form = reactive({
  id: 0,
  shopName: "",
  sellerName: "",
  shopTelephone: "",
  sellerTelephone: "",
  password: "",
  provinceName: "",
  provinceId: null,
  cityName: "",
  cityId: null,
  districtName: "",
  districtId: null,
  pageNum: 1,
  status: 0,
  pageSize: 5,
  commission: 0
});

// 添加表单
const addForm = reactive({
    id: null,
  shopName: "",
  sellerName: "",
  shopTelephone: "",
  sellerTelephone: "",
  password: "",
  provinceName: "",
  provinceId: null,
  cityName: "",
  cityId: null,
  districtName: "",
  districtId: null,
  pageNum: 1,
  status: 0,
  pageSize: 5,
  commission: 0
});



// 批量通过审核
const clickPass = () => {
  const id_array = reactive([]);
  for(let item in delete_list.value) {
    id_array.push(delete_list.value[item].id);
  }
  merchantPass(id_array).then((res) => {
    if(res.state === 0) {
      open_success("操作成功");
      myPage();
    } else {
      open_error(res.message);
    }
  })
}




// 三层地区
const cities = ref([]);

const provinces = ref([]);

const districts = ref([]);


// 进入详情页修改信息
const detail = (index) => {
  const item = reactive(tableData.value[index]);
  router.push({
    name: 'merchantsDetail',
    params: {
      id: item.id,
    }
  });
}


const getStatus = (index) => {
  return tableData.value[index].status;
}


const confirmClickAdd = () => {
  dialogFormVisible.value = false;
  add(addForm).then(() => {
    myPage();
  });
}

const clickAdd = () => {
  dialogFormVisible.value = true;
}

const tableRowClassName = ({row, rowIndex}) => {
    if (rowIndex % 4 === 0) {
      return 'warning-row';
    } else if (rowIndex % 4 === 2) {
      return 'success-row';
    }
    return '';
}


const provinceChange = (Form) => {
  console.log(Form);
  searchCity(Form).then((res) => {
    cities.value = res.data;
  });
}

const cityChange = (Form) => {
  searchDistrict(Form).then((res) => {
    districts.value = res.data;
  })
}

const handleSelectionChange = (selection) => {
  delete_list.value = selection;
}

const clickDelete = () => {
  const id_array = reactive([]);
  for(let item in delete_list.value) {
    id_array.push(delete_list.value[item].id);
  }
  remove(id_array).then(() => {
    myPage();
  });
}


const totalCount = ref(10);


const searchClick = () => {
  searchPage(form).then((res) => {
      myPage();
  });
};

const resetClick = () => {
  form.sex = null;
  form.pageNum = 1;
  form.name = "";
  form.username = "";
  form.phone = "";
  form.pageSize = 5;
  myPage();
}

const changePageNumber = (pageNum) => {
  form.pageNum = pageNum;
  myPage();
}



// 页面启动时先查询所有省份，然后查询商家
onMounted(() => {
  searchProvince().then((res) => {
    console.log(res);
    provinces.value = res.data;
  });
  myPage();
});

const myPage = () => {
  console.log(form);
  searchPage(form).then((res) => {
    console.log(res);
    tableData.value = res.data.list;
    totalCount.value = res.data.total;
  });
}

const handleSizeChange = () => {
  myPage();
}

</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-table >>> .warning-row {
  background: oldlace;
}
.el-table >>> .success-row {
  background: #f0f9eb;
}
</style>
